<template>
    <div class="containerBox">
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">审核结果</div>
        </div>
        <div class="bgBox">
            <div class="lines">
                <div class="couple" style="width: 50rem;">
                    <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 审核结果</label>
                    <el-radio 
                        class="normal"
                        v-for="item in statusList"
                        :key="item.value"
                        v-model="status" 
                        :label="item.value" 
                    >
                        {{item.label}}
                    </el-radio>
                </div>
            </div>
            <div v-if="status === 2">
                <div class="lines" style="margin-bottom: 1rem;">
                    <div class="couple" ref="failedType">
                        <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 失败类型</label>
                        <el-select class="normal" v-model="failedType">
                            <el-option
                                v-for="item in failedArr"  
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="lines">
                    <div class="textArea" ref="failedReason">
                        <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 失败说明</label>
                        <el-input type='textarea' rows="5" class="field" v-model="failedReason" />
                    </div>
                </div>
            </div>
            <div v-if="status === 3">
                <div class="lines" style="margin-bottom: 1rem;">
                    <div class="couple" ref="wastedType">
                        <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 作废类型</label>
                        <el-select class="normal" v-model="wastedType">
                            <el-option
                                v-for="item in wastedArr"  
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="lines">
                    <div class="textArea" ref="wastedReason">
                        <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 作废说明</label>
                        <el-input type='textarea' rows="5" class="field" v-model="wastedReason" />
                    </div>
                </div>
            </div>
            <div class="lines" v-if="status === 1">
                <div class="textArea" ref="unFollowReason">
                    <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 待跟进说明</label>
                    <el-input type='textarea' rows="5" class="field" v-model="unFollowReason" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { getFaildReason, getWastedReason } from '../../bookedCustomer/axios.js'
    export default {
        data() {
            return {
                statusList: [
                    {
                        label: '审核通过',
                        value: 4
                    },
                    {
                        label: '审核失败',
                        value: 2
                    },
                    {
                        label: '待跟进',
                        value: 1
                    },
                    {
                        label: '作废',
                        value: 3
                    }
                ],
                status: 4,
                failedArr: [],
                wastedArr: [],
                // 失败类型
                failedType: '',
                // 失败说明
                failedReason: '',
                // 作废类型
                wastedType: '',
                // 作废说明
                wastedReason: '',
                // 待跟进说明
                unFollowReason: ''
            }
        },
        props: {
            pageType: {
                type: String
            }
        },
        methods: {
            getOptions() {
                getFaildReason().then(res => {
                    if(res.data.status === 200) {
                        this.failedArr = res.data.result
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
                getWastedReason().then(res => {
                    if(res.data.status === 200) {
                        this.wastedArr = res.data.result
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            getResult() {
                let str;
                if(this.status === 2) {
                    this.failedType ? this.$refs.failedType.classList.remove('qxz_redInput') : this.$refs.failedType.classList.add('qxz_redInput')
                    this.failedReason ? this.$refs.failedReason.classList.remove('qxz_redInput') : this.$refs.failedReason.classList.add('qxz_redInput')
                    if(!this.failedType || !this.failedReason) {
                        return false
                    }
                    str = `失败类型：${this.failedType},失败说明：${this.failedReason}`
                }else if(this.status === 3) {
                    this.wastedType ? this.$refs.wastedType.classList.remove('qxz_redInput') : this.$refs.wastedType.classList.add('qxz_redInput')
                    this.wastedReason ? this.$refs.wastedReason.classList.remove('qxz_redInput') : this.$refs.wastedReason.classList.add('qxz_redInput')
                    if(!this.wastedType || !this.wastedReason) {
                        return false
                    }
                    str = `作废类型：${this.wastedType},作废说明：${this.wastedReason}`
                }else if(this.status === 1) {
                    this.unFollowReason ? this.$refs.unFollowReason.classList.remove('qxz_redInput') : this.$refs.unFollowReason.classList.add('qxz_redInput')
                    if(!this.unFollowReason) {
                        return false
                    }
                    str = `待跟进说明：${this.unFollowReason}`
                }
                return {
                    status: this.status,
                    str: str
                }
            },
            clearInput() {
                this.status = 4;
                this.failedType = '';
                this.failedReason = '';
                this.wastedType = '';
                this.wastedReason = '';
                this.unFollowReason = '';
            }
        },
        activated() {
            this.clearInput()
        },
        mounted() {
            !this.failedArr.length && this.getOptions()
        }
    }
</script>
<style scoped>
    .containerBox{
        background: #FFF;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem 0 0;
    }
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
    .couple{
        width: 30rem;
        display: flex;
        height: 4rem;
        font-size: 1.4rem;
        align-items: center;
        justify-content: center;
        color: #222222;
    }
    .textArea{
        width: 100%;
        display: flex;
        /* height: 4rem; */
        font-size: 1.4rem;
        align-items: flex-start;
        justify-content: flex-start;
        color: #222222;
    }
    .field{
        margin-left: 1rem;
        width: 85%;
        min-width: 20rem;
        resize: none;
    }
    .lines{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .labels{
        width: 8rem;
        text-align: right;
    }
    .labels img{
        vertical-align: middle;
        margin-bottom: 2px;
    }
    .normal{
        flex: 1;
        display: flex;
        margin-left: 1rem;
    }
</style>